<template>
	<view>
		<mynavigationbar text="申请权限"/>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<view class="title1">申请权限</view>
			<uni-forms-item>
				<picker @change="bindPickerChange" :value="index" :range="array" name="role">
					<view class="uni-input icon-cheveron-down">{{array[index]}}</view>
					<uni-icons type="bottom" class="icon"></uni-icons>
				</picker>
			</uni-forms-item>
			<view class="title1">基本原因</view>
			<uni-forms-item  name="apply_cause">
<!-- 				<uni-easyinput type="text" v-model="formData.apply_cause" placeholder="请输入" /> -->
				<textarea class="input" v-model="formData.apply_cause" type="text" placeholder="在此处填写申请理由"
					@input="binddata('apply_cause',$event.detail.value)" />
			</uni-forms-item>
		</uni-forms>

		<view class="title1">申请状态</view>
		<view class="status0" v-if="isstatus0show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<uni-icons type="checkbox" class="icon"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<uni-icons type="checkbox" class="icon"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<uni-icons type="checkbox" class="icon"></uni-icons>
			</view>
		</view>
		<view class="status1" v-if="isstatus1show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<uni-icons type="checkbox" class="icon" color="#55a7ea"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<uni-icons type="checkbox" class="icon" color="#2fc0c1"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<uni-icons type="checkbox" class="icon"></uni-icons>
			</view>
		</view>
		<view class="status2" v-if="isstatus2show">
			<view class="apply w">
				<view class="title">
					申请提交
				</view>
				<uni-icons type="checkbox" class="icon" color="#55a7ea"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="audit w">
				<view class="title">
					申请审核
				</view>
				<uni-icons type="checkbox" class="icon" color="#55a7ea"></uni-icons>
			</view>

			<view class="rowline"></view>

			<view class="finish w">
				<view class="title">
					审核完毕
				</view>
				<uni-icons type="checkbox" class="icon" color="#55a7ea"></uni-icons>
			</view>
		</view>

		<view class="title1" style="margin-top: 40rpx;">最近一次已提交申请</view>
		<view class="roleApplyInfo">
			<view class="wu" v-if="isstatus0show">
				没有任何申请
			</view>

			<view class="you" v-if="hasapply">
				<view class="title">
					申请状态：{{ status }}
				</view>
				<view class="apply-time">
					<text>提交时间：</text>
					<text>{{ info.apply_date | dateFormat }}</text>
				</view>
				<view class="audit-time" v-if="isstatus2show">
					<text>审核时间：</text>
					<text>{{ info.check_date | dateFormat }}</text>
				</view>
			</view>
		</view>
		<button @click="submit">提交</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				array: ['请选择', '超级管理员', '教师用户', '学生用户'],
				index: 0,
				roleApplyList: [],
				info: {
					apply_type: 0
				},
				formData: {
					apply_cause: ''
				},
				rules: {
					// 对name字段进行必填验证
					apply_cause: {
						rules: [{
							required: true,
							errorMessage: '请输入申请理由',
						}]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				}
			}
		},
		onLoad() {
			this.getRoleApplyList()
		},
		computed: {
			isstatus0show() {
				return this.roleApplyList.length === 0 ? true : false
			},
			hasapply() {
				return this.roleApplyList.length !== 0 ? true : false
			},
			isstatus1show() {
				if (this.roleApplyList.length !== 0) {
					if (this.info.apply_type == 1) return true
					return false
				}
				return false
			},
			isstatus2show() {
				if (this.roleApplyList.length !== 0) {
					if (this.info.apply_type == 2 || this.info.apply_type == 3) return true
					return false
				}
				return false
			},
			status() {
				if (this.info.apply_type == 1) return '待审核'
				if (this.info.apply_type == 2) return '通过'
				if (this.info.apply_type == 3) return '驳回'
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					if(this.index === 0) return uni.$showMsg('选择要申请的权限')
					res.role = this.index
					console.log(res);
						uni.showModal({
							title: '提示',
							content: '即将提交信息',
							success: async resp => {
								if (resp.confirm) {
									const response = await uni.$http.post('/roleApply/addRoleApply', res)
									// console.log(response.data)
									if (response.statusCode === 802) {
										uni.showToast({
											title: '有未审核的申请',
											icon: 'error'
										})
									}
									if (response.statusCode === 200) {
										uni.showToast({
											title: '提交成功'
										})
										this.getRoleApplyList()
									}
								} else if (resp.cancel) {
									console.log('用户点击取消');
								}
							}
						});
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			async getRoleApplyList() {
				const {
					data: res
				} = await uni.$http.post('/roleApply/getRoleApply')
				console.log(res)
				// 如果是学生教师只能获取自己的申请列表 roleApplyList
				if (this.$store.state.userInfo.role === 2 || this.$store.state.userInfo.role === 3) {
					this.roleApplyList = res.data.roleApplyList
					if (res.data.roleApplyList.length !== 0) {
						this.info = res.data.roleApplyList[0]
					}
				}
				// 如果是超管获取到的是所有学生的applyList
				if (this.$store.state.userInfo.role === 1) {
					this.roleApplyList = res.data.applyList.filter(item => item.user_id === this.$store.state.userInfo.id)
					if (this.roleApplyList.length !== 0) {
						this.info = res.data.applyList.find(item => item.user_id === this.$store.state.userInfo.id)
					}
				}
			},
			loadfont() {
				uni.loadFontFace({
					family: 'ele',
					source: `url('/static/font/ele.TTF')`,
					success() {
			
					},
					fail(res) {
			
					}
				})
			}
		},
		filters: {
			dateFormat(time) {
				var date = new Date(time)
				var y = date.getFullYear()
				var m = padZero(date.getMonth() + 1)
				var d = padZero(date.getDate())
				var h = padZero(date.getHours())
				var mm = padZero(date.getMinutes())
				var s = padZero(date.getSeconds())
				return y + '年' + m + '月' + d + '日  ' + h + ':' + m + ':' + s
			}
		}
	}

	function padZero(n) {
		return n > 9 ? n : '0' + n
	}
</script>

<style lang="less">
	.title1 {
		position: relative;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 84rpx;
		margin-bottom: 20rpx;
		padding-left: 60rpx;
		margin-left: 20rpx;
		&::before {
			position: absolute;
			top: 28rpx;
			left: 30rpx;
			content: '';
			width: 8rpx;
			height: 36rpx;
			background-color: #66c2a9;
			border-radius: 5rpx;
		}
	}
	.uni-forms-item {
		margin-left: 40rpx;
		picker {
			position: relative;
			width: 350rpx;
			height: 70rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 70rpx;
			letter-spacing: 5rpx;
			font-size: 32rpx;
			box-shadow: 0 2px 2px 2px rgba(150,150,150,.3);
			.icon {
				position: absolute;
				right: 30rpx;
				top: 0rpx;
			}
		}
		.input {
			box-sizing: border-box;
			width: 94%;
			height: 200rpx;
			padding-left: 40rpx;
			padding-top: 30rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			box-shadow: 0 2px 2px 2px rgba(150,150,150,.3);
		}
	}
	button {
		width: 570rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 38rpx;
		color: #fff;
		background-color: #66c2a9;
		border-radius: 50rpx;
		margin: 80rpx  auto 20rpx;
	}
	
	
	.status0 {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 50rpx 70rpx 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #ccc;
		}

		.w {
			position: relative;
			color: #999;
			.icon {
				position: absolute;
				top: 50rpx;
				left: 50rpx;
			}
		}
	}

	.status1 {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 50rpx 70rpx 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #ccc;
		}

		.w {
			position: relative;
			color: #999;
			.icon {
				position: absolute;
				top: 50rpx;
				left: 50rpx;
			}
		}

		.apply {
			color: #55a7ea;
		}

		.audit {
			color: #2fbb9c;
		}
	}

	.status2 {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 50rpx 70rpx 50rpx;

		.rowline {
			margin-top: 25rpx;
			width: 100rpx;
			height: 2rpx;
			background-color: #55a7ea;
		}

		.w {
			position: relative;
			color: #999;
			.icon {
				position: absolute;
				top: 50rpx;
				left: 50rpx;
			}
		}

		.apply {
			color: #55a7ea;
		}

		.audit {
			color: #55a7ea;
		}

		.finish {
			color: #55a7ea;
		}
	}

	.roleApplyInfo {
		width: 85%;
		height: 180rpx;
		margin: 20rpx auto 0;
		background-color: #FFFFFF;
		box-shadow: 0 0 2px rgba(150, 150, 150, .3);
		border-radius: 15rpx;
		box-shadow: 0 2px 2px 2px rgba(150,150,150,.3);
		padding: 30rpx 0 0 30rpx;
	}
</style>
